<template>
	<view class='exchange statusBarHeight'>
		<view class="navigation_bar">

			<view style='display: flex; align-items: center;'>
				<uni-icons type="back" size="24" color="#fff" @click='GoBack'></uni-icons>
				<view class="titleName">
					<picker @change="bindPickerChange" :value="index" :range="navList">
						<view class="uni-input">{{navList[index]}}</view>
					</picker>
					<view class="triangle"></view>
				</view>
			</view>
		</view>
		<view class="header">
			<view class="title">
				当前{{navList[index].includes('数字')?'数字积分':navList[index].includes('多多券')?'多多券':navList[index].includes('快乐豆')?'快乐豆':''}}（元）
			</view>
			<view class="number">
				{{index == 0?walletInfo.balance:index == 1?walletInfo.greenIntegral:walletInfo.happyBean}}
			</view>
		</view>

		<view class="box">
			<view class="label">
				要转账户
			</view>
			<view class="inputBox">
				<input placeholder="请输入转账账号" placeholder-class="placeholder" v-model="toUserPhone" class="input"
					type="number" />
			</view>
			<view class="tips">
				提示：请确认好对方账户，一旦转错，积分将无法找回
			</view>
			<view class="label">
				{{index == 0?'多多券':index == 1?'数字积分':'快乐豆'}}
			</view>
			<view class="inputBox">
				<input :placeholder="index == 0?'请输入多多券':index == 1?'请输入数字积分':'请输入快乐豆'" placeholder-class="placeholder"
					v-model="amount" class="input" type="number" />
				<view class="allBtn" @tap='handleAll'>
					全部转入
				</view>
			</view>
			<view class="tips" v-if='errorState'>
				转入多多券不得大于账户多多券
			</view>
		</view>

		<view class="btn" :class="{'active':submitState}" @tap="submit">
			立即转入
		</view>
		<uni-popup ref='tips' :mask-click="false">
			<view class="buyProp">
				<image src="../../static/recharge/close.png" class="closeImg" @tap="closeProp"></image>
				<view class="title">转账</view>
				<view class="numTitle">转账金额</view>
				<input placeholder="请输入转账金额" class="input" placeholder-class="placeholder" maxlength="11" type="number"
					v-model="amount" />
				<view class="numTitle">交易密码</view>
				<input placeholder="请输入交易密码" class="input" placeholder-class="placeholder" maxlength="11" type="number"
					v-model="payPassword" />
				<view class="numTitle" v-if='walletInfo.smsCodeVerify==1'>手机号验证码</view>
				<input v-if='walletInfo.smsCodeVerify==1' placeholder="请输入您的手机号验证码" class="input"
					placeholder-class="placeholder" maxlength="8" type="number" v-model="verifyCode" />
				<view v-if='walletInfo.smsCodeVerify==1' class="codes" @tap="getCodes">{{text}}</view>
				<view class="sures" @tap="sure">确定</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		sendMsg,
		userBalance,
		transfer
	} from '../../api/api.js'
	import {
		throttle
	} from '../../common/common.js'
	export default {
		data() {
			return {
				index: 0,
				navList: ['多多券互转', '数字积分互转'],
				// 手机号
				phone: '',
				// 是否展示购买弹窗
				isProp: false,
				text: '获取验证码',
				// 收款用户手机号
				toUserPhone: '',
				// 转账金额
				amount: '',
				// 支付密码
				payPassword: '',
				// 验证码
				verifyCode: '',
				walletInfo: '', // 钱包信息
			}
		},
		onShow() {
			this.phone = uni.getStorageSync('phone')
			// 获取钱包信息
			this.getuserWalletInfo()

		},
		computed: {
			errorState() {

				let state = false
				switch (this.index) {
					case 0:
						state = Number(this.amount) > Number(this.walletInfo.balance);
						break;
					case 1:
						state = Number(this.amount) > Number(this.walletInfo.greenIntegral);
						break;
					default:
						state = Number(this.amount) > Number(this.walletInfo.happyBean);
				}
				return state
			},
			submitState() {
				return !this.errorState && this.toUserPhone
			}
		},
		methods: {
			handleAll() {
				let amount = 0
				switch (this.index) {
					case 0:
						amount = this.walletInfo.balance;
						break;
					case 1:
						amount = this.walletInfo.greenIntegral;
						break;
					default:
						amount = this.walletInfo.happyBean;
				}
				this.amount = amount
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			// 获取钱包信息
			getuserWalletInfo() {
				let data = {}
				userBalance(data).then(res => {
					this.walletInfo = res.data
					if (this.walletInfo.transferState == 1) {
						this.navList = ['多多券互转', '数字积分互转', '快乐豆互转']
					} else {
						this.navList = ['多多券互转', '数字积分互转']
					}
				})
			},
			// 查看兑换记录
			checkRecord() {
				uni.navigateTo({
					url: './exchangeRecord'
				})
			},
			// 清除兑换金额
			close() {
				this.toUserPhone = ''
			},
			// 选择收款方式
			chooseType(item) {
				this.paymentId = item.id
				this.list.forEach(gitem => {
					gitem.isSelect = false
					if (item.id == gitem.id) {
						gitem.isSelect = true
					}
				})
				this.$forceUpdate()
			},
			//获取验证码
			getCodes() {
				if (this.text != '获取验证码') {
					return false
				}
				//判断手机号是否正确
				if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					let data = {
						phone: this.phone,
						type: 7
					}
					sendMsg(data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '验证码已发送，请注意查收~'
							})
							//正确-发送验证码，变化 text 文字
							var seconds = 60;
							this.text = seconds + 's后重新获取';
							let interval = setInterval(() => {
								if (seconds > 0) {
									seconds--;
									this.text = seconds + 's后重新获取'
								} else {
									this.text = '获取验证码';
									clearInterval(interval)
								}
							}, 1000)
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号~'
					})
				}
			},
			// 打开弹窗
			submit() {
				if (!this.toUserPhone) {
					uni.showToast({
						icon: 'none',
						title: '请输入转账账号'
					})
					return false
				}
				if (!this.amount) {
					uni.showToast({
						icon: 'none',
						title: '请输入金额'
					})
					return false
				}
				this.$refs.tips.open('center');
				this.payPassword = ''
				this.verifyCode = ''
			},
			// 关闭弹窗
			closeProp() {
				this.$refs.tips.close()
			},
			// 提交
			sure() {
				if (!this.payPassword) {
					uni.showToast({
						icon: 'none',
						title: '请输入支付密码'
					})
					return false
				}
				if (!this.verifyCode && this.walletInfo.smsCodeVerify == 1) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false
				}
				let data = {
					payPassword: this.payPassword,
					verifyCode: this.verifyCode,
					amount: this.amount,
					toUserPhone: this.toUserPhone,
					type: this.index + 1,
				}
				throttle(() => {
					transfer(data).then(res => {
						uni.showToast({
							icon: 'none',
							title: '转账成功，请等待审核~'
						})
						// 获取钱包信息
						this.getuserWalletInfo()
						this.amount = ''
						this.toUserPhone = ''
						this.$refs.tips.close()
					})
				}, 5000)

			}
		}
	}
</script>


<style lang="less" scoped>
	page {
		background: #F6F6F7;
	}

	.navigation_bar {
		width: 100vw;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 26rpx 20rpx;
		box-sizing: border-box;
		background: #EB3B27;
		display: flex;
		justify-content: space-between;

		.titleName {
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
		}

		.textBtn {
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}

	}

	.triangle {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid #FFFFFF;
		border-radius: 100rpx;
		margin-left: 10rpx;
	}

	.header {
		width: 100%;
		height: 100rpx;
		background: #EB3B27;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.title {
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
		}

		.number {
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-top: 8rpx;
		}
	}

	.box {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 28rpx;
		box-sizing: border-box;

		.label {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 20rpx;
		}

		.inputBox {
			width: 100%;
			height: 64rpx;
			border-bottom: 2rpx solid #F9F9F9;
			display: flex;
			align-items: center;
			position: relative;

			.input {
				width: 100%;
				height: 100%;
			}

			.allBtn {
				font-weight: 800;
				font-size: 26rpx;
				color: #EB3B27;
				position: absolute;

				right: 10rpx;
			}
		}

		.tips {
			font-weight: 500;
			font-size: 26rpx;
			color: #EB3B27;
			margin-bottom: 30rpx;
			margin-top: 10rpx;
		}
	}

	.btn {
		width: 710rpx;
		height: 88rpx;
		background: #ECEAEA;
		border-radius: 88rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.active {
		background: #EB3B27;
	}

	.buyProp {
		padding-bottom: 40rpx;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.closeImg {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 37rpx;
			right: 25rpx;
		}

		.title {
			margin-top: 38rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 42rpx;
		}

		.numTitle {
			margin-top: 46rpx;
			width: 470rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 37rpx;
		}

		.input {
			margin-top: 12rpx;
			height: 88rpx;
			width: 470rpx;
			border-bottom: 1rpx solid #F2F2F2;
		}

		.placeholder {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
			line-height: 33rpx;
		}

		.sures {
			margin-top: 60rpx;
			text-align: center;
			line-height: 86rpx;
			width: 470rpx;
			height: 86rpx;
			background: #EB3B27;
			border-radius: 4rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.codes {
			position: absolute;
			right: 43rpx;
			bottom: 210rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #EB3B27;
			line-height: 33rpx;
		}


	}
</style>